<template>
  <div class="page">
    <global-header title="未结报表" @back="$router.back()">
      <template #right>
        <GamePopup @update="handleGameUpdate"/>
      </template>
    </global-header>
    <main class="page-main !overflow-hidden page">
      <SearchArea
        v-model="searchParams"
        :show-name="false"
        :show-menu="false"
        :show-date-range="false"
        @search="handleSearch"
      />
      <div class="bg-white mt-[10px]">
        <div
          class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px] px-[15px] border-bottom"
        >
          <div class="w-[25%]">用户名</div>
          <div class="w-[30%] text-center">游戏名称</div>
          <div class="w-[25%] text-center">玩法</div>
          <div class="w-[20%] text-center">下注金额</div>
        </div>
      </div>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white">
          <scroll-list
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @load="load"
          >
            <template v-for="(item, index) in list">
              <UnsettledItem :item="item" :last="index >= list.length - 2" />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-report-unsettled",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import GamePopup from "./components/game-popup.vue";
import UnsettledItem from "./components/unsettled/unsettled-item.vue";
import SearchArea from "./components/search-area.vue";

import { reqReportUnsettled } from "@/api/report";
import { useList } from "@/hooks/useList";

interface Params {
  Issue?: string;
  LotteryId?: string | number;
}

const searchParams = reactive({
  Issue: "",
  LotteryId: -1
});

provide("searchParams", searchParams);

const getParams = () => {
  const params: Params = {};
  if (searchParams.Issue) {
    params.Issue = searchParams.Issue;
  }
  if (searchParams.LotteryId && searchParams.LotteryId != -1) {
    params.LotteryId = searchParams.LotteryId;
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<ReportUnsettledMo, Params>(
  reqReportUnsettled,
  getParams
);

const handleSearch = () => {
  search();
};

const handleGameUpdate = (val) => {
  searchParams.LotteryId = val.value
  handleSearch()
}

onMounted(() => {
  getData();
});
</script>

<style scoped></style>
